<template>
  <el-container class="main_con">
    <div class="filter_con">
      <div class="button_area">
        <el-button type="primary" size="medium" @click="showAddDialog">新增关键字</el-button>
      </div>
      <div class="filter_area">
        <el-input
          class="serach_input mr_15 mt_15"
          style="width:400px"
          size="medium"
          placeholder="关键字名称"
          v-model="obj.name"
        ></el-input>
        <el-button class="mr_15 mt_15" @click="searchList" size="medium">搜索</el-button>
      </div>
    </div>
    <div class="list_con">
      <el-table :data="list" element-loading-text fit highlight-current-row>
        <el-table-column label="#" width="50" type="index"></el-table-column>
        <el-table-column label="关键字名称" prop="name"></el-table-column>
        <el-table-column label="操作" width="250">
          <template slot-scope="scope">
            <el-button type="text" @click="editItem(scope.row)">编辑</el-button>
            <el-button type="text" @click="delItem(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table_footer" style="justify-content:flex-end" v-show="total != 0">
        <el-pagination
          @current-change="changePage"
          class="pages"
          background
          hide-on-single-page
          layout="prev, pager, next"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <el-dialog title="新增关键字" :visible.sync="dialogFormVisible" width="500px">
      <el-form :model="form" ref="form" label-width="100px" :rules="rules">
        <el-form-item label="关键字名称" prop="name">
          <el-input v-model.trim="form.name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addKeyWordList()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改关键字" :visible.sync="editDialogFormVisible" width="500px">
      <el-form :model="form" ref="form" label-width="100px" :rules="rules">
        <el-form-item label="关键字名称" prop="name">
          <el-input v-model.trim="form.name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editKeyWord()">确 定</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import {
  getKeyWordList,
  postKeyWordList,
  editKeyWordList,
  deleteKeyWordList
} from "@/api/mall/product";
export default {
  data() {
    return {
      obj: {
        name: ""
      },
      objTemp: {},
      total: 0,
      page: 1,
      size: 10,
      list: [],
      form: {
        name: ""
      },
      dialogFormVisible: false,
      editDialogFormVisible: false,
      rules: {
        name: [{ required: true, message: "关键字不能为空", trigger: "blur" }]
      }
    };
  },
  mounted() {
    this.keyWordList();
  },
  methods: {
    keyWordList() {
      this.form = {
        name:""
      }
      getKeyWordList().then(res => {
        this.list = res.msg;
      });
    },
    searchList() {
      //复制查询对象
      this.objTemp = { ...this.obj };
      this.keyWordList();
    },
    showAddDialog() {
      this.dialogFormVisible = !this.dialogFormVisible;
      this.form.name = "";
    },
    addKeyWordList() {
      let _this = this;
      this.$refs["form"].validate(valid => {
        if (valid) {
          let data = this.form;
          delete data.id
          postKeyWordList(data).then(res => {
            _this.dialogFormVisible = !_this.dialogFormVisible;
            _this.keyWordList();
          });
        }
      });
    },
    changePage(page) {
      this.page = page;
      this.searchList();
    },
    delItem(item) {
      let data = {
        id: item
      };
      deleteKeyWordList(data).then(res => {
        this.keyWordList();
      });
    },
    editItem(item) {
      this.editDialogFormVisible = !this.editDialogFormVisible;
      this.form = item;
    },
    editKeyWord() {
      let data = this.form;
      editKeyWordList(data).then(res => {
        this.editDialogFormVisible = !this.editDialogFormVisible;
        this.keyWordList();
      });

    }
  }
};
</script>

<style>
</style>